<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品审核</title>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">

    <span>商品名称：</span>
    <div style="width: 300px">
        <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="inputsearch">
        </el-input>
    </div>
    <el-button type="primary" @click="search()" round>搜索</el-button>


    <br>
    <hr>
    <br>
    <!--下拉框，自主选择每页的行数-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <label class="layui-form-label">每页显示条数:</label>
            <select name="size" v-model="size" v-on:click="selectSize()" lay-verify="required">
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="10">10</option>
            </select>
        </div>
    </div>
    <!--商品详情弹框-->
    <el-dialog :visible.sync="dialogFormVisible" @close="closeKK">

        <el-form :model="form">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="form.pname" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="商品图片" :label-width="formLabelWidth">
                <!--:with-credentials='false' 身份认证关闭-->
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :with-credentials='false'>
                    <img v-if="form.pimg" :src="form.pimg" :disabled="true" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="材质" :label-width="formLabelWidth">
                <el-input v-model="form.pmaterial" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="商品价格" :label-width="formLabelWidth">
                <el-input v-model="form.pprice" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="品牌" :label-width="formLabelWidth">
                <el-input v-model="form.pbrand" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="添加时间" :label-width="formLabelWidth">
                <el-input v-model="form.paddtime" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="审核状态" :label-width="formLabelWidth">
                <el-input v-model="form.astatus" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>

    <!--表格数据-->
    <el-table
            ref="productTable"
            :data="products"
            style="width: 100%">
        <el-table-column label="商品编号" show-overflow-tooltip width="50px">
            <template slot-scope="scope">
                <span >{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品名称">
            <template slot-scope="scope">
                <span>{{ scope.row.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品图片">
            <template slot-scope="scope">
                <span style="margin-left: 10px">
                    <img :src="'http://121.5.226.17/images/'+scope.row.pimg"
                         width="50px" height="50px" style="border-radius: 50%">
                </span>
            </template>
        </el-table-column>
        <el-table-column label="材质">
            <template slot-scope="scope">
                <span>{{ scope.row.pmaterial }}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品价格">
            <template slot-scope="scope">
                <span>{{ scope.row.pprice }}</span>
            </template>
        </el-table-column>
        <el-table-column label="品牌">
            <template slot-scope="scope">
                <span>{{ scope.row.pbrand }}</span>
            </template>
        </el-table-column>
        <el-table-column label="添加时间" show-overflow-tooltip width="50px">
            <template slot-scope="scope">
                <span>{{ scope.row.paddtime }}</span>
            </template>
        </el-table-column>

        <el-table-column label="货物状态">
            <template slot-scope="scope">
                <!--<span v-if="scope.row.pstatus==1">已上架</span>
                <span v-if="scope.row.pstatus==-1">已下架</span>-->
                <span v-if="scope.row.pstatus==1">
                    <el-button type="success" v-on:click="productpstatus(scope.$index, scope.row)" plain>已上架</el-button>
                </span>
                <span v-if="scope.row.pstatus==-1">
                    <el-button type="info" v-on:click="productpstatus(scope.$index, scope.row)" plain>已下架</el-button>
                </span>
            </template>
        </el-table-column>
        <el-table-column label="审核状态">
            <template slot-scope="scope">
                <span v-if="scope.row.astatus==1">通过</span>
                <span v-else>待审核</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button v-if="scope.row.astatus==1"
                        size="mini" type="primary" icon="el-icon-edit"
                        @click="handleEdit(scope.$index, scope.row)">
                </el-button>
                <el-button v-else
                        size="mini" type="info" icon="el-icon-edit"
                        @click="handleEdit(scope.$index, scope.row)">
                </el-button>
                <el-button
                        size="mini" type="primary" icon="el-icon-share"
                        @click="handleDetails(scope.$index, scope.row)">
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="nowcurrent"
            :page-size="size"
            @current-change="loadProductPage">
    </el-pagination>
</div>
<script src="/vue/vue.js"></script>
<script src="/elementui/index.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                products:null,
                total:0,
                astatus:'', //审核状态
                inputsearch: '',//搜索输入的内容
                //分页
                total: 0, //数据总条数
                nowcurrent: 1, //当前页
                size: 5, //每页
                dialogFormVisible: false,
                formLabelWidth: '120px',//条数
                form:{
                    id:'', pname:'', pimg:'', pprice:'',
                    penterprise:'', paddtime:'', astatus:'', pmaterial:'',
                    pbrand:''
                }
            }
        },
        methods:{
            //打开对话框
            addDialog(){
                this.dialogFormVisible = true;
            },
            //审核商品
            handleEdit(index, row){
                console.log(row)
                if (row.astatus == 1){
                    row.astatus = -1;
                }else {
                    row.astatus = 1;
                }
                axios.get("/productexamine/"+row.id+"/"+row.astatus).then(value => {
                    if (this.inputsearch.length!=0){
                        this.search(1);
                    }else {
                        this.loadProductPage(1);
                    }
                })
            },
            //商品详情
            handleDetails(index, row){
                this.form = row;
                this.dialogFormVisible = true;
            },
            //关闭弹框清除form数据
            closeKK(){
                this.form={
                    id:'', pname:'', pimg:'', pprice:'',
                    penterprise:'', paddtime:'', astatus:'', pmaterial:'',
                    pbrand:''
                }
            },

            //模糊查询，搜索
            search(nowcurrent){
                console.log(this.inputsearch)
                axios.get("/productsearchlike/"+this.inputsearch+"/"+this.nowcurrent+"/"+this.size).then(value => {
                    if (value.data.state == 1){
                        this.products = value.data.data.records;
                        this.nowcurrent = value.data.data.current;
                        this.total = value.data.data.total;
                        this.size = value.data.data.size;
                    }
                })

            },

            //自主选择每页的条数
            selectSize:function(){
                if (this.inputsearch.length!=0){
                    this.search(1);
                }else {
                    this.loadProductPage(1);
                }
            },
            //商品状态
            productpstatus:function(index,row){
                if (row.pstatus==1){
                    alert("确认要下架吗？")
                    row.pstatus=-1;
                }else {
                    alert("确认要上架吗？")
                    row.pstatus=1;
                }

            },
            //分页查询商品
            loadProductPage(nowcurrent){
                this.nowcurrent = nowcurrent;
                axios.get("/products/"+nowcurrent+"/"+this.size).then(value => {
                    if (value.data.state == 1){
                        this.products = value.data.data.records;
                        this.nowcurrent = value.data.data.current;
                        this.total = value.data.data.total;
                        this.size = value.data.data.size;
                    }
                })
            }
        },
        //钩子函数
        mounted(){
            if (this.inputsearch.length!=0){
                //模糊查询时挂载
                this.search(1);
            }else {
                //分页查询商品信息
                this.loadProductPage(1);
            }
        }
    })
</script>
</html>